<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户登录</title>
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
		<style>
			body {
				font-family: Arial, sans-serif;
				background-color: #f4f4f4;
				margin: 0;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 100vh;
			}

			#loginForm {
				background-color: #fff;
				width: 300px;
				padding: 20px;
				box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
				border-radius: 8px;
			}

			h1 {
				text-align: center;
				margin-bottom: 20px;
			}

			div {
				margin-bottom: 15px;
			}

			label {
				display: block;
				margin-bottom: 5px;
				font-weight: bold;
			}

			input[type="text"],
			input[type="password"] {
				width: 100%;
				padding: 10px;
				border: 1px solid #ccc;
				border-radius: 4px;
			}

			button {
				width: 100%;
				padding: 10px;
				background-color: #007bff;
				color: #fff;
				border: none;
				border-radius: 4px;
				cursor: pointer;
			}

			button:hover {
				background-color: #0056b3;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div id="loginForm" v-if="!isLogin">
				<h1>用户注册</h1>
				<div>
					<label for="username">用户名:</label>
					<input type="text" id="username" v-model="username" />
				</div>
				<div>
					<label for="password">密码:</label>
					<input type="password" id="password" v-model="password" />
				</div>
				<div>
					<label for="password">重复密码:</label>
					<input type="password" id="password" v-model="password" />
				</div>
				<div id="app">
					用户性别:
					<input type="radio" v-model="gender" value="1">男
					<input type="radio" v-model="gender" value="2">女
					<br />
					{{gender}}
				</div>
				<div id="app">
					爱好:
					<input type="checkbox" value='听音乐' v-model="likes" />听音乐
					<input type="checkbox" value='唱歌' v-model="likes" />唱歌
					<input type="checkbox" value='打游戏' v-model="likes" />打游戏
					<input type="checkbox" value='看电影' v-model="likes" />看电影
					<br />
				
					{{likes}}
				</div>
				<div>
					学历
				<select v-model="work">
					<option disabled value="">请选择你的学历</option>
					<option>中专</option>
					<option>大专</option>
					<option>本科</option>
					<option>研究生</option>
				</select><br />
				</div>
				
				<div>
					用户简介：<input type=""/>
				</div>
				
				<div>
					<input type="checkbox"/>用户同意协议
				</div>
				
				<div>
					<button @click="login">注册</button>
				</div>
			</div>
			<div v-else>
				<p>{{ username }} 已登录</p>
				<div>
					<button @click="loginOut">登出</button>
				</div>
			</div>
		</div>

		<script>
			var app = Vue.createApp({
				data() {
					return {
						username: '',
						password: '',
						
						isLogin: false
					}
				},
				methods: {
					login: function() {
						if (this.username === "admin" && this.password === "123") {
							alert("注册成功");
							this.isLogin = true;
						} else {
							alert("注册失败");
						}
					},
					loginOut: function() {
						this.isLogin = false;
					}
				}
			});
		
			var vm = app.mount("#app");
		</script>
	</body>
</html>